<template>
  <div class="mc-container">
    <h3 class="mc-container-header">{{ monitorDto.bsName }}监控详情</h3>
    <base-seller-detail :sellerId="monitorDto.sellerId" />
    <base-seller-chart :sellerId="monitorDto.sellerId" />
    <base-seller-product :sellerId="monitorDto.sellerId" />
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import XEUtils from 'xe-utils'
import BaseSellerDetail from '../detail/base-seller-detail.vue'
import BaseSellerChart from '../detail/base-seller-chart.vue'
import BaseSellerProduct from '../detail/base-seller-product.vue'
import { getMonitor } from '@/api/common'

const route = useRoute()
const monitorDto = ref({
  bsName: '',
  sellerId: '',
  productId: '',
  bsType: '',
  status: '',
})

const props = defineProps({
  productId: {
    type: String,
    required: true
  },
  // 标记是否在抽屉弹窗中显示
  isDrawerMode: {
    type: Boolean,
    default: true
  }
})
const monitorId = XEUtils.toValueString(route.query.id)
const reqMonitor = () => {
  if (monitorId) {
    getMonitor(monitorId).then((res) => {
      monitorDto.value = res.data
    })
  }
}

onMounted(() => {
  reqMonitor()
})
</script>
<style scoped lang="scss"></style>
